<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/element-ui.css">
    <script src="./js/vue.js"></script>
    <script src="./js/element-ui.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/download.js"></script>

    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .img-auto {
            display: inline-block;
            max-width: 100%;
            height: auto
        }

        .item {
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }

        .block {
            display: flex;
            width: 33.3%;
            align-items: center;
            flex-direction: column;
            margin: 10px auto 20px;
        }

        .block .img_top {
            width: 90%;
            border-radius: 10px;
            object-fit: cover;
        }


        .block_bottom_container {
            display: flex;
            justify-content: space-between;
            height: 50px;
            width: 100%;
            max-width: 90%;
            margin: 1rem;
        }

        .block_bottom_container .img_bottom {
            max-width: 80%;
            height: 50px;
        }

        .img_action {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 10px;
        }

        .block_bottom_container .img_download {
            width: 46%;
        }

        .block_bottom_container .img_share {
            width: 46%;
        }


        .top_container {
            width: 100%;
            height: 80px;
            background-color: black;
            margin-bottom: 30px;
        }

        .top_container .main {
            height: 80px;
            box-sizing: border-box;
            padding: 0 5%;
            display: flex;
            justify-content: space-between;
            color: white;
        }

        .top_container .main .top_left {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .top_container .main img {
            width: 45px;
        }

        .top_container .main .btn_type_video {
            color: #42A0FE;
            background-color: black;
            font-size: 2ch;
            border: none;
            margin: 0 1rem;
            white-space: nowrap;
            width: auto;
        }

        .top_container .main .btn_type_pdf {
            color: #AAAAAA;
            background-color: black;
            font-size: 2ch;
            border: none;
            margin: 0 1rem;
            white-space: nowrap;
            width: auto;
        }

        .top_container .main .btn_type_device {
            color: #AAAAAA;
            background-color: black;
            font-size: 2ch;
            border: none;
            margin: 0 1rem;
            white-space: nowrap;
            width: auto;
        }

        .top_container .main .top_right {
            width: 100px;
            display: flex;
            justify-content: end;
            align-items: center;
        }

        .top_container .main .top_language {
            width: 80px;
            height: 30px;
            border-radius: 15px;
            background-color: black;
            border-color: white;
            border-width: 1px;
            color: white;
            margin-top: 10px;
        }


        .block1 {
            display: flex;
            width: 25%;
            align-items: center;
            flex-direction: column;
            margin: 10px 0 20px;
        }

        .block1 .device_container {
            position: relative;
        }

        .block1 .device_img {
            width: 100%;
        }

        .block1 .device_cover_img {
            width: 97.2%;
            position: absolute; /* 绝对定位 */
            left: 4px;
            top: 0;
            z-index: 9;
        }

    </style>
</head>

<body>
<div class="app" v-loading="loading" :element-loading-text="loading_title"
     element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">

    <div class="top_container">
        <div class="main">
            <div class="top_left">
                <img src="img/anyfit_logo.png" class="img-auto" alt=""/>
                <button id="btn_type_video" class="btn_type_video" @click="typeVideoAction()">{{
                        type_video_title
                    }}
                </button>
                <button id="btn_type_pdf" class="btn_type_pdf" @click="typePdfAction()">{{ type_pdf_title }}</button>
                <button id="btn_type_device" class="btn_type_device" @click="typeDeviceAction()"> {{
                        type_device_title
                    }}
                </button>
            </div>
            <div class="top_right">
                <button class="top_language" @click="change_language()">{{ language }}</button>
            </div>
        </div>
    </div>

    <div class="box">
        <div class="item">
            <div class="block" v-if="type_active_index !== 2" v-for="cn_obj in data_array" :key="cn_obj">
                <img class="img_top" :src="cn_obj.img_top" @click="click_preview_action(cn_obj)"/>
                <div class="block_bottom_container">
                    <img class="img_bottom" :src="cn_obj.img_pc_bottom"/>
                    <div class="img_action">
                        <img class="img_download" src="img/video/anyfit_download_icon.png"
                             @click="click_action(cn_obj)">
                        <img class="img_share" src="img/anyfit_share_icon.png" @click="share_action(cn_obj)">
                    </div>

                </div>
            </div>
            <div class="block1" v-if="type_active_index === 2" v-for="(cn_obj,idx) in data_array">
                <div class="device_container">
                    <img class="device_img" @click="device_click(idx)" :src="cn_obj.device_img"/>
                    <img v-if="device_cover_idx === idx" class="device_cover_img" @click="device_close_click()"
                         :src="cn_obj.device_cover_img"/>
                </div>
            </div>
        </div>
    </div>

</div>
</body>


<script type="text/javascript">
    //创建vue对象
    var vm = new Vue({
        el: ".app",
        created() {
            this.start();
        },
        mounted() {
            // 当组件挂载时，设置初始标题
            this.setDocumentTitle();
        },
        data: {
            loading_title: cn_loading_title,
            loading: false,
            type_pdf_title: type_pdf_cn_title,
            type_video_title: type_video_cn_title,
            type_device_title: type_device_cn_title,
            title: cn_title,
            language: cn_language,
            language_type: 0, // 0中文  1英文
            type_active_index: 0, // 0视频展册  1pdf展册  2智能设备
            device_cover_idx: -1,
            data_array: category_video_data_cn(),
        },

        methods: {
            start() {
                if (!isPC()) {
                    {
                        console.log("跳转mobile");
                        window.location.replace("./index_mobile.html");
                    }
                }
            },
            click_action(obj) {
                if (this.language_type === 0) {
                    // 中文
                    vm.loading_title = cn_loading_title
                } else {
                    // 英文
                    vm.loading_title = en_loading_title
                }
                vm.loading = true

                setTimeout(this.delayAction, show_loading_time);
                downloadfile(base_url + obj.url, obj.title, getFileType(obj.url));
            },
            share_action(obj) {
                let createInput = document.createElement("input");
                createInput.value = base_url + obj.url;
                // 获取的是容器的innerHTML，如果是容器是input，就改为value即可
                document.body.appendChild(createInput);
                createInput.select();
                document.execCommand("Copy");
                alert(this.language_type === 0 ? copy_success_cn : copy_success_en);
                createInput.remove();
            },
            autoSelect() {
                let element = document.querySelector(".item");
                element.style.width = "100%";
                document.getElementById("btn_type_video").style.color = "#AAAAAA";
                document.getElementById("btn_type_pdf").style.color = "#AAAAAA";
                document.getElementById("btn_type_device").style.color = "#AAAAAA";
                let elementId;

                if (this.type_active_index === 0) {
                    // 视频
                    elementId = "btn_type_video";
                    if (this.language_type === 0) {
                        this.data_array = category_video_data_cn();
                    } else {
                        this.data_array = category_video_data_en();
                    }
                } else if (this.type_active_index === 1) {
                    // 展册
                    elementId = "btn_type_pdf";
                    if (this.language_type === 0) {
                        this.data_array = category_pdf_data_cn();
                    } else {
                        this.data_array = category_pdf_data_en();
                    }

                } else if (this.type_active_index === 2) {
                    // 设备
                    element.style.width = "90%";
                    elementId = "btn_type_device";
                    if (this.language_type === 0) {
                        this.data_array = category_device_data_cn();
                    } else {
                        this.data_array = category_device_data_en();
                    }
                }

                if (this.language_type === 1) {
                    this.title = en_title;
                    this.language = en_language;
                    this.type_pdf_title = type_pdf_en_title;
                    this.type_video_title = type_video_en_title;
                    this.type_device_title = type_device_en_title;
                } else {
                    this.title = cn_title;
                    this.language = cn_language;
                    this.type_pdf_title = type_pdf_cn_title;
                    this.type_video_title = type_video_cn_title;
                    this.type_device_title = type_device_cn_title;
                }
                this.setDocumentTitle();
                document.getElementById(elementId).style.color = "#42A0FE";
            },
            typeVideoAction() {
                this.type_active_index = 0;
                this.autoSelect();
            },

            typePdfAction() {
                this.type_active_index = 1;
                this.autoSelect();
            },

            typeDeviceAction() {
                this.type_active_index = 2;
                this.autoSelect();
            },
            device_click(idx) {
                this.device_cover_idx = idx;
            },
            device_close_click() {
                this.device_cover_idx = -1;
            },
            delayAction() {
                vm.loading = false
            },
            setDocumentTitle() {
                document.title = this.title;
            },
            click_preview_action(obj) {
                window.open(base_url + obj.url);
            },
            change_language() {
                if (this.language_type === 0) {
                    this.language_type = 1;
                    this.autoSelect();
                } else {
                    this.language_type = 0;
                    this.autoSelect();
                }
            }
        },
    });
</script>

</html>
